<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.border-image-pesudo {

			position: relative;

			width: 200px;

			height: 100px;

			border-radius: 10px;
			margin-bottom: 30px;

		}



		.border-image-pesudo::before {

			content: "";

			position: absolute;

			width: 200px;

			height: 100px;

			top: 50%;

			left: 50%;

			transform: translate(-50%, -50%);

			border: 10px solid;

			border-image: linear-gradient(45deg, gold, deeppink) 1;

		}


		.a {
			width: 200px;

			height: 200px;

			border: solid 5px;

			border-radius: 50px;
			/* overflow: hidden; */

			border-image: linear-gradient(270deg, rgba(220, 155, 71, 0.06), rgba(220, 155, 71, 1), rgba(185, 114, 52, 1)) 1 1;

			background-origin: border-box;

			background-clip: content-box, border-box;
			/* -webkit-clip-path: circle(50% at 50% 50%);
			clip-path: circle(50% at 50% 50%); */
		}
	</style>
	<body>
		<div class="border-image-pesudo"></div>
		<div class="a"></div>
	</body>
</html>
